<?php include "lang.php"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <?php include "import.php"; ?>
        <title><?php echo $langs["register.title"]; ?></title>
        <script type="text/javascript">
            var dateFormat = "<?php echo $langs["register.inputDOB"]; ?>";
            $(document).ready(function() {
                var inpText = $('#dobText');
                if (inpText.val() != dateFormat) {
                    inpText.css('color', '#000');
                }
                else if (inpText.val() == "") {
                    inpText.val(dateFormat);
                    inpText.css('color', '#86774A');
                }
			
                $.validator.addMethod("validateConfirmPass", function(value) {
                    return (value == $("#pwd").val());
                }, "<?php echo $langs["validation.notMatchPass"] ?>");
			
                $.validator.addMethod("validateEmail", function(value) {
                    var emailRegex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                    return emailRegex.test(value);
                }, "<?php echo $langs["validation.emailNotMatch"] ?>");
			
                $.validator.addMethod("validateDob", function(value) {
                    var dobRegex = /^(((0[1-9]|[12]\d|3[01])\/(0[13578]|1[02])\/((19|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)\/(0[13456789]|1[012])\/((19|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])\/02\/((19|[2-9]\d)\d{2}))|(29\/02\/((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/;
                    if(value == "") return true;
                    else if(value == "<?php echo $langs["register.inputDOB"]; ?>") return true;
                    else return dobRegex.test(value);
                }, "<?php echo $langs["register.dobNotMatch"] ?>");
			
                $("#form").validate({
                    rules: {
                        userName: { required: true },
                        password: { required: true },
                        confirmPassword: { validateConfirmPass: true },
                        dobText: {validateDob: true},
                        fullName: { required: true },
                        phoneNumber: { required: true },
                        email: { validateEmail: true }
                    },
					
                    messages: {
                        userName: "<?php echo $langs["validation"]; ?>",
                        password: "<?php echo $langs["validation"]; ?>",
                        fullName: "<?php echo $langs["validation"]; ?>",
                        phoneNumber: "<?php echo $langs["validation"]; ?>"
                    }
                });
            });
        </script>
    </head>
    <body>
        <form id="form" method="post">
            <?php include("floating-panel.php"); ?>
            <div class="wrapper">
                <?php include "header.php"; ?>  
                <div class="main_body">
                    <div class="content_box_header">
                        <?php echo $langs["register.title"]; ?>
                    </div>
                    <div class="content_box">
                        <center>
                            <div id="msg">
                                <?php
                                if (isset($_GET["msg"])) {
                                    $msg = $_GET["msg"];
                                    if ($msg == "notmatch")
                                        echo "<label class=\"error\">" . $langs["register.secCodenotMatch"] . "</label>";
                                    else if ($msg == "ok")
                                        echo "<label class=\"suc\">" . $langs["register.registerSuccussfully"] . "</label>";
                                    else if ($msg == "no")
                                        echo "<label class=\"error\">" . $langs["register.registerFailed"] . "</label>";
                                    else if ($msg == "existed")
                                        echo "<label class=\"error\">" . $langs["register.usernameExisted"] . "</label>";
                                }
                                ?>
                            </div>
                            <table class="register_form">
                                <tr>
                                    <th colspan="2"><?php echo $langs["register.userAccount"]; ?></th>
                                </tr>
                                <tr>
                                    <th align="left"><?php echo $langs["register.username"]; ?>:</th>
                                    <td>
                                        <input type="text" name="userName" id="userName"/>
                                        <label id="error" class="error"></label>
                                    </td>
                                </tr>
                                <tr>
                                    <th align="left"><?php echo $langs["register.password"]; ?>:</th>
                                    <td>
                                        <input type="password" name="pwd" id="pwd"/>
                                    </td>
                                </tr>
                                <tr>
                                    <th align="left"><?php echo $langs["register.confirmPass"]; ?>:</th>
                                    <td>
                                        <input type="password" name="confirmPassword" id="confirmPassword"/>
                                    </td>
                                </tr>
                                <tr>
                                    <th colspan="2"><?php echo $langs["register.personalDetail"]; ?></th>
                                </tr>
                                <tr>
                                    <th align="left"><?php echo $langs["register.fullName"]; ?>:</th>
                                    <td>
                                        <input type="text" name="fullName" id="fullName"/>
                                    </td>
                                </tr>
                                <tr>
                                    <th align="left"><?php echo $langs["register.dob"]; ?>:</th>
                                    <td>
                                        <input disabled="disabled" type="text" id="dobText" name="dobText" onkeydown="this.style.color='black'" onclick="if (this.value==dateFormat) {this.value='';this.style.color='#86774A';}" onblur="if (this.value=='') {this.value=dateFormat;this.style.color='#86774A';}" style="color: #86774A"/>
                                        <script type="text/javascript">$('#dobText').val(dateFormat);</script>
                                        <a href="#" id="dob"><img src="../images/layout/calendar-button.gif"></a>
                                    </td>
                                </tr>
                                <tr>
                                    <th align="left"><?php echo $langs["register.phoneNumber"]; ?>:</th>
                                    <td>
                                        <input type="text" id="phoneNumber" name="phoneNumber"/>
                                    </td>
                                </tr>
                                <tr>
                                    <th align="left"><?php echo $langs["register.email"]; ?>:</th>
                                    <td>
                                        <input type="text" name="email" id="email"/>
                                    </td>
                                </tr>
                                <tr>
                                    <th colspan="2"><?php echo $langs["register.confirm"]; ?></th>
                                </tr>
                                <tr>
                                    <th align="left"><?php echo $langs["register.secCode"]; ?>:</th>
                                    <td><img src="../util/captcha/generateImage.php" alt="security code" border="1" />
                                        <span><?php echo $langs["register.inputSecCode"]; ?>: <input type="text" name="secCode" id="secCode" class="capcha_input"/></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <center>
                                            <a href="#" class="button right" onclick="resetForm('form');"><?php echo $langs["register.resetBtn"]; ?></a>
                                            <a href="#" class="button right" onclick="submitForm('form', '../action/registerAccountAction.php', 'post');"><?php echo $langs["register.agreeBtn"]; ?></a>                                
                                        </center>
                                    </td>
                                </tr>
                            </table>
                        </center>
                    </div>
                </div>
            </div>
            <?php include("footer.php"); ?>
        </form>
    </body>
</html>
